<template>
  <div class="big-box">
    <div class="user-box">
      <div class="title">
        <router-link to="/login">登录</router-link>
        <span>·</span>
        <router-link to="/register">注册</router-link>
      </div>

      <!--formData是表单数据；myrules是验证规则  -->
      <el-form
        :model="formData"
        :rules="myrules"
        ref="myform"
        label-width="0px"
        class="demo-ruleForm"
      >
        <el-form-item label prop="logname">
          <el-input prefix-icon="el-icon-user-solid" v-model="formData.logname" placeholder="用户名"></el-input>
        </el-form-item>

        <el-form-item label prop="logpwd" style="margin-bottom:16px">
          <el-input
            prefix-icon="el-icon-lock"
            type="password"
            v-model="formData.logpwd"
            placeholder="密码"
            show-password
          ></el-input>
        </el-form-item>

        <el-form-item label prop="checked">
          <el-checkbox v-model="formData.checked">我已阅读并同意协议</el-checkbox>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="logFn('myform')" class="reg-btn" :loading="isLoading">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
// 导入api接口文件夹里面的登录接口
import { login } from "@/api/admin.js";
export default {
  data() {
    return {
      isLoading: false,
      // 表单数据
      formData: {
        logname: "",
        logpwd: "",
        checked: false,
      },
      // 验证规则
      myrules: {
        // 验证规则名字要和formData中一致, el-form-item的prop值必须也要和formData中一致
        // 每个验证规则是个数组，数组中有一个或多个对象；
        // required 必填； message验证不通过的提示；
        // trigger 触发方式：blur 失去焦点； change改变时触发
        logname: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 3,
            max: 12,
            message: "长度在 3 到 12 个字符",
            trigger: "blur",
          },
        ],

        // 密码验证？必填；6-12位
        logpwd: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            pattern: /^[a-zA-Z\d]{6,12}$/,
            message: "字母数字组成，长度6-12位",
            trigger: "blur",
          },
        ],

        checked: [
          {
            validator: (rule, value, callback) => {
              if (value) {
                callback(); // 通过校验
              } else {
                callback(new Error("请勾选协议"));
              }
            },
            trigger: "change",
          },
        ],
      },
    };
  },

  methods: {
    // 点击提交按钮触发的事件
    logFn(formName) {
      this.$refs[formName].validate((valid) => {
        // 判断表单验证是否通过
        if (valid) {
          // 如果验证通过，把表单数据提交到后端

          // 按钮加载中...
          this.isLoading = true;

          login(this.formData)
            .then((res) => {
              // 后端成功返回值了，关闭按钮的加载
              this.isLoading = false;

              if (res.data.code === 0) {
                // console.log(res.data);

                // 登录成功之后，后端返回一个token，把它存在localStorage里面
                localStorage.setItem("token", res.data.token);

                // 登录成功之后，后端返回一个logname，把它存在localStorage里面
                localStorage.setItem("username", res.data.logname);
                // 弹出信息
                this.$message({
                  message: "登录成功",
                  type: "success",
                });

                // 重置表单
                this.$refs[formName].resetFields();

                // 跳转到管理系统的首页
                this.$router.push("/index");
              } else {
                // 登录不成功
                this.$message({
                  message: res.data.msg,
                  type: "warning",
                });
              }
            })
            .catch((r) => {
              // 后端成功返回值了，关闭按钮的加载
              this.isLoading = false;
              this.$message.error('ajax请求错误')
            });
        } else {
          console.log("验证不通过");
          return false;
        }
      });
    },
  },
};
</script>


<style lang="scss" scoped>
// scoped 局部作用域

.big-box {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-image: url(../assets/images/bg.jpg);
  background-repeat: no-repeat;
  // contain 包含整个图片，不一定覆盖整个区域
  // cover 一定覆盖整个区域， 不一定包含整个图片
  background-size: cover;
}

.user-box {
  width: 300px;
  min-height: 300px;
  background-color: #fff;
  margin: 100px auto;
  padding: 20px 30px;
  border-radius: 5px;
  box-shadow: 0px 0px 10px 5px #ddd;
  .title {
    text-align: center;
    a {
      font-size: 18px;
    }
    span {
      font-size: 24px;
      margin: 0 20px;
    }
  }
}

.router-link-active {
  color: orangered;
  font-weight: bold;
  border-bottom: 2px solid orangered;
  padding-bottom: 8px;
}

.demo-ruleForm {
  margin-top: 40px;
}

.reg-btn {
  width: 100%;
}
</style>